<template>
  <div class="tradeViewMain box-shadow" v-loading="loading">
    <trad-view v-if="!active" @listenDepthAction="handleDepthAction" :trad="trad" :forwhat="kline"/>
    <depth-charts v-if="active" @listenKlineAction="handleKlineAction" :depth-data="depthData"/>
  </div>
</template>

<script>
// import Io from '@/utils/socket/index';
import TradView from '@/components/tradeView/TradView';
import DepthCharts from '@/components/highCharts/HighChartsDepth';

export default {
  name: 'trading-center-top',
  data() {
    return {
      kline: 'kline',
      loading: true,
      active: 0, // 0显示k线 1 深度
    };
  },
  components: {
    TradView,
    DepthCharts,
  },
  props: {
    depthData: Object,
    trad: Object,
  },
  created() {
  },
  mounted() {
    this.loading = false;
  },
  beforeDestroy() {
    // let type = 'minute';
    // const resolution = this.$store.state.app.klineConfig.interval;
    // const trad = this.$store.state.app.trade;
    // const ticker = trad.symbol;
    // if (resolution === '5') {
    //   type = 'minute5'
    // } else if (resolution === '15') {
    //   type = 'minute15'
    // } else if (resolution === '30') {
    //   type = 'minute30'
    // } else if (resolution === '60') {
    //   type = 'hour'
    // } else if (resolution === '240') {
    //   type = 'hour4'
    // } else if (resolution === '1D') {
    //   type = 'day'
    // } else if (resolution === '1W') {
    //   type = 'week'
    // } else if (resolution === '1M') {
    //   type = 'month'
    // }
    // Io.cfwsUnsubscribe(`kline.${type}.${ticker}`);
  },
  methods: {
    handleDepthAction() {
      this.active = 1;
    },
    handleKlineAction() {
      this.active = 0;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.tradeViewMain {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

